<script lang="ts" setup>
import { computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { RouteMap, useRouter } from '@/router';
import { useAuthStore } from '@/store/auth';

const props = defineProps(['customClass']);
const computedClassName = computed(() => `flex justify-center items-center ${props.customClass}`);

const authStore = useAuthStore();
const { isAgreementAccepted } = storeToRefs(authStore);
const router = useRouter();
const language = ref(uni.getStorageSync('language'));

const navigateToUA = () => {
  router.to(RouteMap.webWeb, { key: 'useragreement' });
};

const navigateToPP = () => {
  router.to(RouteMap.webWebview, {
    url: encodeURIComponent(authStore.GetprivacyText())
  });
};
</script>

<template>
  <view :class="computedClassName" @click="authStore.toggleAgreementAccepted">
    <uni-icons v-if="isAgreementAccepted" color="#269c74" size="16" type="checkbox-filled" />
    <uni-icons v-else color="#8a8a8a" size="16" type="circle" />
    <!-- 繁体中文 -->
    <template v-if="language === 'zh_CN'">
      <view class="flex items-center text-sm flex-wrap">
        <text class="ml-1 text-third">我已閱讀並同意</text>
        <text class="ml-1 text-blue" @click.stop="navigateToUA">《用戶服務協議》</text>
        <text class="ml-1 text-third">和</text>
        <text class="ml-1 text-blue" @click.stop="navigateToPP">《隱私權政策》</text>
      </view>
    </template>
    <!-- 日文 -->
    <template v-else-if="language === 'ja'">
      <view class="flex items-center text-sm flex-wrap">
        <text class="ml-1 text-blue" @click.stop="navigateToUA">《ユーザサービスプロトコル》</text>
        <text class="ml-1 text-third">と</text>
        <text class="ml-1 text-blue" @click.stop="navigateToPP">《プライバシーポリシー》</text>
        <text class="ml-1 text-third">を読み、同意します</text>
      </view>
    </template>
    <!-- 韩文 -->
    <template v-else-if="language === 'ko'">
      <view class="flex items-center text-sm flex-wrap">
        <text class="ml-1 text-third">을 읽고 이에 동의합니다.</text>
        <text class="ml-1 text-blue" @click.stop="navigateToUA">《사용자 서비스 계약》</text>
        <text class="ml-1 text-third">및</text>
        <text class="ml-1 text-blue" @click.stop="navigateToPP">《개인정보 보호정책》</text>
      </view>
    </template>
    <!-- 英文 -->
    <template v-else-if="language === 'en'">
      <view class="flex items-center text-sm flex-wrap">
        <text class="ml-1 text-third">I have read and agreed to the</text>
        <text class="ml-1 text-blue" @click.stop="navigateToUA">《User Service Agreement》</text>
        <text class="ml-1 text-third">and</text>
        <text class="ml-1 text-blue" @click.stop="navigateToPP">《Privacy Policy》</text>
      </view>
    </template>
    <!-- 简体中文 -->
    <template v-else>
      <view class="flex items-center text-sm flex-wrap">
        <text class="ml-1 text-third">我已阅读并同意</text>
        <text class="ml-1 text-blue" @click.stop="navigateToUA">《用户服务协议》</text>
        <text class="ml-1 text-third">和</text>
        <text class="ml-1 text-blue" @click.stop="navigateToPP">《隐私政策》</text>
      </view>
    </template>
  </view>
</template>

<style lang="scss">
.check-for-agreement-text {
  font-size: 24rpx;
  line-height: 34rpx;

  &.is-default {
    color: #8a8a8a;
  }

  &.is-primary {
    color: #2e6edb;
  }
}
</style>
